<template>
  <div class="shoppingcart">
    <div class="carttop">
      <h6>购物车</h6>
        <img src="" alt="">
      <div class="city">新城区</div>
      <button @click="clear()" class="btned">清空购物车</button>
    </div>
    <div v-show="len ==0" class="cartcenter">
      <img src="https://oss.suning.com/vss/activity/wximg/cart/sn-cart-empty.png" alt="">
      <p>购物车还是空的，快来挑选好货吧</p>
      <button @click="$router.push('/home/hompage')">去逛逛</button>
    </div>
    <div v-for="(item,index) in shoppcart" :key="index" v-show="len !=0" class="cartcen">
      <div class="catop">
        <input type="radio" @click="change()" v-model='bool' >
        <img src="https://oss.suning.com/vss/activity/wximg/cart/cshop.png" alt="">
        <span>祺天家电专营店</span>
        <van-icon name="arrow" />
      </div>
      <div class="cacenter">

        <div class="rad">
          <input type="radio"  @click="change()" v-model='bool'>
        </div>

        <div class="img">
          <img :src="item.img1" alt="">
        </div>
        <div class="divtop">
          <div class="tex">{{ item.proname | filText }}</div>
          <div class="divbottom">
            <span>￥{{ item.originprice }}</span>
            <div class="btn">
              <button @click="remove(item)">-</button>
              <span>{{ item.num }}</span>
              <button @click="add(item)">+</button>
            </div>
          </div>
        </div>
      </div>  
      <div class="fudiv">
        <h4>服务<span>全保修3年</span></h4>
        <div >
          <span>领卷打折8.8折</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    
    <div class="xihan">
      <TuiJianVue/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import TuiJianVue from '@/components/TuiJian.vue';
import { ClearAllCart, DelCart, GetCart, CountCart } from "@/api/index.js"
Vue.use(Toast);

export default {
  data() {
    return {
      shoppcart:[],
      bool: true,
    }
  },
  components:{
  TuiJianVue
  },
  computed: {
    len() {
      return this.shoppcart.length;
    }
  },
  mounted() {
    var userid = sessionStorage.getItem('userid')
    ClearAllCart(userid).then((ok) => {
      // console.log(ok);
      this.shoppcart = ok.data.data;
      console.log(this.shoppcart);
    })
  },
  methods: {
    change() {
      this.bool = !this.bool;
    },
    add(id) {
      var count = id.num;
      count = count + 1;
      console.log(count)
      CountCart(id.cartid,count).then((ok) => {
        console.log(ok);
        var userid = sessionStorage.getItem('userid')
        ClearAllCart(userid).then((ok) => {
          this.shoppcart = ok.data.data;
          console.log(this.shoppcart);
        })
      })
     
    },
    remove(id) {
      var userid = sessionStorage.getItem('userid')
      // console.log(11);
      if (id.num == 0) {
        // console.log(id.num)
        DelCart(id.cartid).then((ok) => {
          console.log(ok);
          ClearAllCart(userid).then((ok) => {
            this.shoppcart = ok.data.data;
            console.log(this.shoppcart);
          })
        })
      } else {
        var count = id.num;
        count = count - 1;
        console.log(count)
        CountCart(id.cartid, count).then((ok) => {
          console.log(ok.message);
          ClearAllCart(userid).then((ok) => {
            this.shoppcart = ok.data.data;
            console.log(this.shoppcart);
          })
        })
      }
      
    },
    clear() {
      var userid = sessionStorage.getItem('userid')
      GetCart(userid).then((ok) => {
        console.log(ok);
        this.shoppcart = []
      })
    }
  },
  filters: {
    filText(ts) {
      if (ts.length > 22) {
        return ts.substr(0, 29) + "..."
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.shoppingcart{
  width: 100%;
  position: relative;
  .carttop{
    height: 0.44rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .btned{
      position: absolute;
      left: 2.8rem;
      border-radius: 0.12rem;
      padding: 0.05rem 0.12rem;
      font-size: 0.12rem;
      border: none;
    }
    h6{
      font-size: 0.17rem;
      font-weight: 100;
    }
    .city{
      font-size: 0.12rem;
    }
    img{
      width: 0.07rem;
      height: 0.08rem;
      margin-left: 0.09rem;
      margin-right: 0.03rem;
    }
  }
  .cartcenter{
    width: 100%;
    height: 2.685rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p{
      font-size: 0.14rem;
      margin-top:0.31rem ;
      margin-bottom: 0.12rem;
    }
    button{
      width: 0.69rem;
      height: 0.24rem;
      font-size: 0.12rem;
      background-color: #ffffff;
      color: #666;
      border: 1px solid #666;
      border-radius: 0.07rem;
    }
    img{
      width: 0.875rem;
      height: 0.875rem;
    }
  }
  .cartcen{
    width: 95%;
    margin: 2.5% 2.5% ;
    background-color: #ffffff;
    border-radius: 0.11rem;
    .catop{
      font-size: 0.13rem;
      height: 0.47rem;
      display: flex;
      align-items: center;
      // text-align: center;
      img{
        width: 0.2rem;
        height: 0.2rem;
      }
      input{
        width: 0.18rem;
        height: 0.18rem;
      }
      span{
        line-height: 0.047rem;
      }
    }
    .cacenter{
      display: flex;
      height: 0.91rem;
      justify-content: space-between;
      .rad{
        display: flex;
        align-items: center;
        justify-content: center;
        input {
            width: 0.18rem;
            height: 0.18rem;
            margin-bottom: 0.03rem;
          }
      }
      .img{
        width: 0.9rem;
        height: 0.9rem;
        img{
          width: 0.9rem;
          height: 0.9rem;
        }
      }
      .divtop{
        width: 2.09rem;
      }
      .tex{
        font-size: 0.12rem;
      }
    }
    .divbottom{
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
      line-height: 0.29rem;
      span{
        font-size: 0.14rem;
        color: #ff4422;
      }
      .btn{
        width: 0.9rem;
        height: 0.27rem;
        border-radius: 0.15rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #666;
        button{
          border: none;
          width: 0.21rem;
          height: 0.21rem;
          line-height: 0.21rem;
          border-radius: 50%;
          font-size: 0.12rem;
          margin: 0.03rem;
        }
      }
    }
    .fudiv{
      font-size: 0.12rem;
      display: flex;
      justify-content: space-between;
      padding-bottom: 0.16rem;
      padding-top: 0.16rem;
      h4{
        margin-left: 0.24rem;
        span{
          color: #666666;
        }
      }
      span{
        font-size: 0.14rem;
        color: #ff4422;
      }
      .van-icon{
        margin-right: 0.24rem;
      }
    }
  }
}
</style>